import { Icon, Table } from 'antd';
import React from 'react';
import { ColumnProps } from 'antd/lib/table';
import { OrderOperateHistory } from '../../model';
import { orderStatusMap } from '../../List/components/ListTable';

const columns: ColumnProps<OrderOperateHistory>[] = [
  {
    title: '操作者',
    dataIndex: 'operateMan',
    align: 'center',
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    align: 'center',
    render: status => orderStatusMap[status],
  },
  {
    title: '买家付款状态',
    key: 'paymentStatus',
    align: 'center',
    render: (_text, record) => (record.orderStatus >= 1 ? '已付款' : '未付款'),
  },
  {
    title: '商家发货状态',
    key: 'deliverStatus',
    align: 'center',
    render: (_text, record) => (record.orderStatus >= 2 ? '已发货' : '未发货'),
  },
  {
    title: '备注',
    dataIndex: 'note',
    align: 'center',
  },
];

interface OrderOperationsInfoProps {
  operations: OrderOperateHistory[];
}

const OrderOperationsInfo: React.FC<OrderOperationsInfoProps> = props => (
  <div>
    <div style={{ marginBottom: '15px' }}>
      <Icon type="info-circle" theme="filled" />
      <span style={{ marginLeft: '7px' }}>订单操作记录</span>
    </div>
    <Table<OrderOperateHistory>
      dataSource={props.operations}
      columns={columns}
      rowKey="id"
      bordered
    />
  </div>
);

export default OrderOperationsInfo;
